<template>
  <div>
    <Container class="header">
      <el-row>
        <el-col :md="12" class="logo">
          <div class="logo-name">{{ site_config.site_name }}</div>
        </el-col>
        <el-col :md="12" class="mobile">
          <div class="mobile-name">律师电话：{{ site_config.mobile }}</div>
        </el-col>
      </el-row>
    </Container>
  </div>
</template>

<script setup lang="ts">
const site_config = useSiteConfigStore();
</script>

<style scoped>
.header {
  padding: 10px;
}
.logo-name {
  background-color: #333333;
  font-size: 24px;
  color: white;
  padding: 10px;
  display: inline-block;
}
.mobile {
  text-align: right;
}
.mobile-name {
  display: inline-block;
  margin-top: 5px;
  font-size: 22px;
  color: #715700;
}
</style>
